import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    state = {
      todo:'',
      todoList:[]
    }
    change=(e)=>{
      this.setState({
        todo:e.target.value
      })
    }
    submit=(e)=>{
      // console.log(e)
      if(e.keyCode === 13){
        this.state.todoList.push({
          id:Math.random(),
          str:this.state.todo
        })
        // this.state.todo = ''
        this.setState({
          todo:''
        })
      }
    }
    del(item){
      console.log(item)
      // this.state.todoList = this.state.todoList.filter(val=>val.id!==item.id)
      this.setState({
        todoList:this.state.todoList.filter(val=>val.id!==item.id)
      })
    }
    render() {
        return <div className=''>
            <input type="text" value={this.state.todo} onChange={this.change} onKeyDown={this.submit}/>
              <ul>
                {
                  this.state.todoList.map(item=>{
                    return <li key={item.id}>{item.str} <button onClick={()=>{this.del(item)}}>X</button></li>
                  })
                }
              </ul>
        </div>;
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))